<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>简单聊天室</title>  
    <style>  
        #chat {  
            height: 300px;  
            overflow-y: auto;  
            border: 1px solid #ccc;  
            padding: 10px;  
            margin-bottom: 10px;  
        }  
    </style>  
</head>  
<body>  
    <div id="chat"></div>  
    <input type="text" id="messageInput" placeholder="输入消息...">  
    <button onclick="sendMessage()">发送</button>  
  
    <script>  
        function sendMessage() {  
            // 获取用户输入的消息  
            var message = document.getElementById('messageInput').value.trim();  
            if (message) {  
                // 假设当前时间是消息的一部分  
                var formattedMessage = `你: ${message}`;  
                  
                // 显示消息在聊天区域  
                var chatDiv = document.getElementById('chat');  
                var newMessageElement = document.createElement('div');  
                newMessageElement.textContent = formattedMessage;  
                chatDiv.appendChild(newMessageElement);  
                  
                // 滚动到聊天区域的底部  
                chatDiv.scrollTop = chatDiv.scrollHeight;  
                  
                // 清空输入框  
                document.getElementById('messageInput').value = '';  
            }  
        }  
  
        // 这里可以添加更多功能，比如接收消息的逻辑（需要后端支持）  
    </script>  
</body>  
</html>